<template>
  <div id="login">
    <img alt="Vue logo" src="../../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div>{{username}}</div>
    <button @click="submit">change</button>
    <button @click="ssub">change</button>
    <button @click="async_submit">change async</button>
    <button @click="aa_submit">change async</button>
    <button @click="aaa_submit('abcd')">change async</button>
  </div>
</template>

<script>
import HelloWorld from "../../components/HelloWorld.vue";
import { mapState, mapActions } from "vuex";

export default {
  name: "login",
  computed: mapState({
    username: state => state.login.username
  }),
  methods:  {
    ...mapActions('login',["submit","async_submit","aaa_submit"]),
    ssub(){
      this.$store.commit('login/submit','456');
    },
    aa_submit(){
      //this.$store.dispatch('login/aaa_submit','789');
      this.aaa_submit("223344");
    },
  },
  components: {
    HelloWorld
  }
};
</script>

<style>

</style>
